<template>
  <view class="mine">
    <view class="content">
      <image src="../../static/logo.png"></image>
      <view class="user_info">
        <view class="nick_name">昵称: 13888888888</view>
        <view class="prev">
          上级代理: 138888888
          <u-icon size="28" name="grid"></u-icon>
        </view>
      </view>
    </view>

    <view class="list_item">

      <view class="item" @click="handleMember">
        <u-icon name="grid"></u-icon>
        <view>所属会员组：</view>
        <view>普通会员</view>
      </view>

      <view class="item" v-for="(item, index) in settingList" :key="index" @click="handleHandoff(item)">
        <u-icon :name="item.icon"></u-icon>
        <view>{{ item.title }}</view>
        <view class="right_arrow">></view>
      </view>


    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      settingList: [
        {
          title: '个人设置',
          icon: 'setting-fill'
        },
        {
          title: '推广赚钱',
          icon: 'setting-fill'
        },
        {
          title: '积分明细',
          icon: 'setting-fill'
        },
        {
          title: '提现设置',
          icon: 'setting-fill'
        },
        {
          title: '功能操作视频',
          icon: 'setting-fill'
        },
        {
          title: '会员权限介绍',
          icon: 'setting-fill'
        },
        {
          title: '支付密码设置',
          icon: 'setting-fill'
        },
        {
          title: '密码修改',
          icon: 'setting-fill'
        },
        {
          title: '售后客服',
          icon: 'setting-fill'
        },
      ],
      jumpPageMap: {
        "个人设置": () => {
          uni.navigateTo({
            url: "/pages/personalSettings/personalSettings",
          })
        },
        "推广赚钱": () => {
          uni.navigateTo({
            url: "/pages/login/login",
          })
        },
        "积分明细": () => {
          uni.navigateTo({
            url: "/pages/pointsRedemption/pointsRedemption",
          })
        }
      }
    }
  },
  methods: {
    handleHandoff(item) {
      console.log('切换', item.title)
      this.jumpPageMap[item.title] && this.jumpPageMap[item.title]()
    },
    handleMember() {
      uni.navigateTo({
        url: "/pages/memberCenter/memberCenter",
      })
    }
  }
}
</script>

<style scoped lang="scss">
.mine {
  padding: 20rpx 40rpx;
}

.content {
  display: flex;
  align-items: center;
  justify-content: space-between;

  image {
    width: 80rpx;
    height: 80rpx;
  }

  .prev {
    display: flex;
    background-color: #eff1f5;
    border-radius: 60rpx;
    padding: 10rpx;
    /* padding-left: 30rpx; */
    padding-right: 20rpx;
  }

  .integral_text {
    display: flex;
    flex-direction: column;
    align-items: center;

    .text {
      font-size: 36rpx;
      font-weight: 600;
    }

    .blue_text {
      color: #0470f8;
    }

    .red_text {
      color: #e74154;
    }

    .su_text {
      color: #888a8c;
      font-size: 24rpx;
      margin-top: 20rpx;
    }

    .text_color {
      color: #000;
    }
  }

  .line {
    height: 80rpx;
    width: 4rpx;
    background-color: #e5e5e5;
  }
}

.list_item {
  margin-top: 40rpx;

  .item {
    position: relative;
    display: flex;
    border-bottom: 2rpx solid #e3e3e3;
    padding-bottom: 20rpx;
    font-size: 28rpx;
    font-weight: 600;
    margin-top: 20rpx;

    .right_arrow {
      position: absolute;
      right: 0;
      color: #7f7f7f;
    }
  }
}
</style>
